<template>
	<view class="questionBank">
		<u-tabs :list="list" :current="type" :is-scroll="false" @change="changeTabs"></u-tabs>
		<view class="swiperMain" :style="'padding-top:' + tabNav + 'px;'">
			<view class="sm_item" v-for="(item, index) in orderList" :key="index" v-show="index == type">
				<!-- <view class="item" @click="onQuestionBank()"> -->
				<view class="item" v-for="(Citem, Cindex) in item">
					<view class="item_box">
						<view class="orderH">
							<view class="left">
								<text>订单编号：{{ Citem.order_sn }}</text>
							</view>
							<view class="right" :class="{ overdue: Citem.status == 1 }">
								<!-- "status": 0,是否过期 0否1是 <number> -->
								<text>{{ Citem.status == 0 ? '使用中' : '已过期' }}</text>
							</view>
						</view>
						<view class="main">
							<view class="mainLeft"><image :src="Citem.image" mode=""></image></view>
							<view class="mainRight">
								<view class="rightMain">
									<view class="tit">{{ Citem.title }}</view>
									<!-- <view class="des">
									商品描述
								</view> -->
									<view class="wraf">
										<view class="price">
											<text>有效期: {{ Citem.end_time }}</text>
										</view>
										<view v-if="Citem.status == 1" class="stock" @click.stop="useTo(Citem)">继续使用</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="button_stand"></view>
				</view>
				<noData text="暂时没有数据" v-if="item.length == 0"></noData>
			</view>
		</view>

		<u-loadmore :status="status" icon-color="#267dff" v-if="last_page > 1" />
		<!-- 继续使用询问 -->
		<inquiryPop :showTitle="'您的题库已到期，继续使用需要续费，确定要继续使用吗？'" :showPopup="showPopup" @cancel="cancel" @confirm="confirm"></inquiryPop>
	</view>
</template>

<script>
import noData from '@/components/xs-components/noData.vue';
import inquiryPop from '@/components/xs-components/success-pop/inquiry-pop.vue';
export default {
	components: {
		noData,
		inquiryPop
	},
	data() {
		return {
			list: [
				{
					name: '全部'
				},
				{
					name: '题库'
				},
				{
					name: '资料'
				},
				{
					name: '听力'
				},
				{
					name: '真题'
				}
			],
			orderList: [],
			tabNav: 0, // 高航高度
			showPopup: false,
			page: 1,
			//  0 全部 1 题库 2 资料 3 听力 4 真题
			type: 0,
			last_page: 0,
			status: 'loadmore', // loadmore loading nomore
			orderDetails: {} // 续费
		};
	},
	onShow() {
		this.postData();
	},
	onLoad() {
		
	},
	mounted() {
		this.tabNavHeight();
	},
	created() {
		for (let i in this.list) {
			this.orderList.push([]);
		}
		// console.log(this.letterList.length)
	},
	methods: {
		// 获取题库数据
		postData() {
			uni.showLoading({
				title: '加载中'
			});
			const { page, type } = this;
			//  0 全部 1 题库 2 资料 3 听力 4 真题
			const data = { page, status: type };
			this.$api
				.post(global.apiUrls.myQuestionBank, data)
				.then(res => {
					console.log(res);
					uni.hideLoading();
					this.last_page = res.data.data.last_page;
					if (this.page == 1) {
						this.orderList[this.type] = res.data.data.data;
					} else {
						this.orderList[this.type] = [...this.orderList[this.type], ...res.data.data.data];
					}
					this.$forceUpdate();
				})
				.catch(err => {
					// uni.hideLoading();
				});
		},
		// 导航点击事件
		changeTabs(index) {
			this.type = index;
			this.page = 1;
			this.last_page = 1;
			this.postData();
			// console.log(this.orderList);
		},
		// 我的题库列表点击事件
		onQuestionBank() {
			console.log('我的题库列表点击事件');
		},
		// 继续使用
		useTo(Citem) {
			this.showPopup = true;
			this.orderDetails = Citem;
		},
		// 取消
		cancel() {
			this.showPopup = false;
		},
		// 确认
		confirm() {
			this.showPopup = false; 
			setTimeout(()=>{
				uni.navigateTo({
					url: '/pages/study/orderPayment?price=' + this.orderDetails.price + '&id=' + this.orderDetails.course_id
				});
			},100)
		},
		// 计算导航高度  u-tabs
		tabNavHeight() {
			let info = uni.createSelectorQuery().select('.u-tabs');
			info.boundingClientRect(data => {
				//data - 各种参数
				// console.log(data.height)  // 获取元素宽度
				this.tabNav = data.height;
			}).exec();
		}
	},
	onReachBottom() {
		if (this.page >= this.last_page) return (this.status = 'nomore');
		this.page++;
		this.status = 'loading'; // loadmore loading nomore
		this.postData();
	}
};
</script>

<style lang="scss" scoped>
@import './questionBank.scss';
</style>
